<template>
    <div>
        <div class="bodybox">
            <!-- 左侧 -->
            <div class="mainleft">
                <div class="mainitem">
                    <P>节点状况</P>
                    <div class="panel1" id="test1"></div>
                </div>
                <div class="mainitem">
                    <P>当前场景播放</P>
                </div>
            </div>
            
            <!-- 中间 -->
            <div class="main">
                <div class="mainitem">
                    <div>视频监控</div>
                    <div>
                        <img src="@/assets/image/showvideo.png">
                    </div>
                </div>
                <div class="mainitem">
                    <div> 工程地图</div>
                    <img src="@/assets/image/showmap.png">
                </div>
            </div>
            <!-- 右侧 -->
            <div class="mainright">
                <div class="mainitem">
                    <P>能耗统计</P>
                <div class="echarts" ref="aux" style="width: 100%;height: 36vh;"></div>

                </div>
                <div class="mainitem">
                    <P>用时统计</P>
                <div class="echarts" ref="aux2" style="width: 100%;height: 36vh;"></div>
 
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    data() {
        return {
            charts: "",
            allData: [], //后端数据
            opinionData: ["155", "400", "900", "800", "300", "900", "270"], //数据
            myCharts: '',
            myCharts2: '',
            myCharts3:'',
            myCharts4: '',
        };
    },
    mounted() {
      this.barBtn()

      this.drawLine();
    //监听窗口变化实现图表自适应
    window.addEventListener("resize", this.adapTive);
    //调用适配方法
    this.adapTive();
    },
    methods: {
        drawLine() {
      this.charts = this.$echarts.init(this.$refs.aux);
      this.charts2 = this.$echarts.init(this.$refs.aux2);

 // 标题文本，支持使用 \n 换行。
      let initOptions = {
        backgroundColor: '#17244E',
        // title: {
        //   left: "3%",
        //   top: "5%",
        //   text: "设备每日耗电量展示" 
        // },
        // 提示
        tooltip: {
          show: true,
          trigger: "axis",
          axisPoint: {
            type: "shadow"
          }
        },
        // tooltip: {
        //   trigger: "axis"
        // },
        legend: {
          align: "right", //文字在前图标在后
          left: "3%",
          top: "15%",
          data: ["耗电量"]
        },
        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true
        },

        toolbox: {
          show: true,
          feature: {
            // saveAsImage: {} ,//保存为图片
            magicType: { type: ["line", "bar"] } //此处最新版本echarts可设置三个值（stack-堆叠模式
          }
        },

        // x轴
        xAxis: {
          name: "日期",
          type: "category",
          boundaryGap: true,
          boundaryGap: ["0", "0.5"],
          axisTick: {
            alignWithLabel: true //保证刻度线和标签对齐
          },
          data: [] //x坐标
        },
        // y轴
        yAxis: {
          type: "value",
          boundaryGap: true,
          boundaryGap: ["0", "0.5"]
          // splitNumber: 5, //纵坐标数
          // interval: 2000 //强制设置坐标轴分割间隔
        },

        series: [
          {
            name: "耗电量",
            type: "bar", //折线图line;柱形图bar;饼图pie
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            data: this.opinionData
          }
        ]
      };
      let initOptions2 = {
        backgroundColor: '#17244E',
        // title: {
        //   left: "3%",
        //   top: "5%",
        //   text: "设备每日耗电量展示" 
        // },
        // 提示
        tooltip: {
          show: true,
          trigger: "axis",
          axisPoint: {
            type: "shadow"
          }
        },
        // tooltip: {
        //   trigger: "axis"
        // },
        legend: {
          align: "right", //文字在前图标在后
          left: "3%",
          top: "15%",
          data: ["用时统计"]
        },  
        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true
        },

        toolbox: {
          show: true,
          feature: {
            // saveAsImage: {} ,//保存为图片
            magicType: { type: ["line", "bar"] } //此处最新版本echarts可设置三个值（stack-堆叠模式
          }
        },

        // x轴
        xAxis: {
          name: "日期",
          type: "category",
          boundaryGap: true,
          boundaryGap: ["0", "0.5"],
          axisTick: {
            alignWithLabel: true //保证刻度线和标签对齐
          },
          data: [] //x坐标
        },
        // y轴
        yAxis: {
          type: "value",
          boundaryGap: true,
          boundaryGap: ["0", "0.5"]
          // splitNumber: 5, //纵坐标数
          // interval: 2000 //强制设置坐标轴分割间隔
        },

        series: [
          {
            name: "用时统计",
            type: "bar", //折线图line;柱形图bar;饼图pie
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            data: this.opinionData
          }
        ]
      };
      // 绘制基础图表
      this.charts.setOption(initOptions);
      this.charts2.setOption(initOptions2);

    },

     // 根据业务完善图表
     setEcharts() {
      // 1.组装类目数据和系列数据
      // reverse()：对数组进行倒序
      let cateData = this.allData.powerConsumption.map(item => item.logTime);
      cateData = cateData.reverse();
      //   console.log(cateData);
      let serData = this.allData.powerConsumption.map(item =>
        Number(item.logValue).toFixed(2)
      );
      serData = serData.reverse();
      
      //  设置图标绘制项
      let setOptions = {
        xAxis: {
          data: cateData
        },
        // 图表类型
        series: [
          {
            data: serData
          }
        ]
      };
      //  设置图标绘制项
      let setOptions2 = {
        xAxis: {
          data: cateData
        },
        // 图表类型
        series: [
          {
            data: serData
          }
        ]
      };
      // setOption 合并多次的绘图配置项 完善图表
      this.charts.setOption(setOptions);
      this.charts2.setOption(setOptions2);

    },
    // 窗口适配方法
    adapTive() {
      // 图标适配
      this.charts.resize();
    },
        barBtn() {
            this.myCharts = echarts.init(document.getElementById('test1'))

            let option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    type:'plain', //'plain'默认普通图例,'scroll'可滚动翻页的图例。当图例数量较多时可以使用。
                    left:100, //距离左边距离也可以使用 'left' 'center' 'right'
                    top:10, //距离顶部距离
                    orient: 'horizontal', //图例排列方式 'horizontal'默认横向排列 'vertical' 竖向排列
                    textStyle:{ 
                    color:'#fff' //图例字体颜色
                    }
                },


                series: [
                    {
                    name: '节点状况',
                    type: 'pie',
                    radius: ['40%', '70%'], // 中心空白厚度占比,
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10, //圆角角度
                        borderColor: '#fff', //边框颜色
                        borderWidth: 2 //边框宽度
                    },
                    label: {
                        show: false,
                        position: 'center', //字体居中显示
                    },
                    emphasis: {
                        label: {
                        show: true,
                        fontSize: 20, //字体大小
                        fontWeight:500  //字体是否加粗 'normal' 'bold' 'bolder' 'lighter'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 735, name: '离线数量' },
                        { value: 1048, name: '在线数量' },
                    ]
                    }
                ]


            }


            // 把配置项给实例对象
            this.myCharts.setOption(option)
            // 让图表跟随屏幕自动的去适应
            window.addEventListener('resize', function () {
                if (this.myChart) this.myCharts.resize()
            })
        
        }
    },
};
</script>

<style scoped>
.panel1 {
  margin-top: 30px;
    width: 300px;
    height: 300px;
}
.bodybox{
    /* width: 1600px; */
    height: 800px;
    display: flex;
}
.mainitem img{
    width: 100%;
    height: 350px;
    margin-top: 10px;
    /* margin: 0 auto; */
}
.mainitem{
    margin-top: 5px;
    color: #fff;
    width: 100%;
    height: 50%;
    border: 1px solid #60b6f1;
}
.mainleft{
    flex: 1;
    /* border: 1px solid #60b6f1; */
    padding: 10px;
    /* background: '#111A43', */
}
.main{
    flex: 2;
    /* border: 1px solid #60b6f1; */
    padding: 10px;
}
.mainright{
    flex: 1;
    /* border: 1px solid #60b6f1; */
    padding: 10px;

}
</style>
